<template>
    <div>

        <!-- 右边 -->
        <div class="right">
            <div class="rightone">{{titlename}}</div>
            <ul style="padding:0 ;margin:0" class="righttwo">
                <li class="Chlist" v-for="(item,i) in diyi " :key=item>
                    <span class="Chspan" :class="{background:arry.indexOf(i)!=-1}" @click="arrydaxiao(i,$event)">{{item}}</span>
                    <span>{{oddsarr[i+1]}}</span>
                </li>
            </ul>
        </div>
        <!-- ///////////////////////浮动按钮 -->
        <!-- <div class="mint-msgbox-wrapper" style="position: absolute; z-index:20001;display:block">
                <div class="mint-msgbox mint-msgboxtwo">
                    <span class="few">共1注</span>
                    <span class="By">200金币</span>
                    <span class="qingkong">清空</span>
                    <span class="Betting"> 投注</span>
                </div> -->
        <!-- <div class="mint-msgbox mint-msgboxone mint-msgboxonetwo" style="display:none">
                    <div class="box">
                        <div class="title">确认投注</div>
                        <div class="btn">
                            <mt-button class="btn1" size="normal" type="danger" @click="purchase()">取消</mt-button>
                            <mt-button size="normal" type="danger" @click="confirm">确认</mt-button>
                        </div>
                    </div>

                </div> -->
        <!-- </div> -->
    </div>
    <!--  -->

</template>
<script>
import { Navbar, TabItem } from "mint-ui";

export default {
    data() {
        return {
            diyi: [
                "0",
                "1",
                "2",
                "3",
                "4",
                "5",
                "6",
                "7",
                "8",
                "9",
                "大",
                "小",
                "单",
                "双"
            ],
            arry: [],
            oddsarr: [],
            qiushu: {},
            name: []
        };
    },
    created() {},
    mounted() {},
    methods: {
        ///////////////////
        arrydaxiao: function(i, e) {
            var value = this.arry.length;

            if (this.arry.indexOf(i) == -1) {
                this.arry.push(i);
                var obj = {
                    name: this.titlename,
                    name1: e.target.innerHTML,
                    peilv: e.target.parentNode.lastChild.innerHTML,
                    id: this.titlename + e.target.innerHTML
                };
                this.name.push(obj);
            } else {
                this.arry.forEach((item, index) => {
                    if (item == i) {
                        this.arry.splice(index, 1);
                        this.name.splice(index, 1);
                    }
                });
            } ///判断是否有粗在
            if (this.titlename == "第一球") {
                var diyi = document.querySelector("#d0");
            } else if (this.titlename == "第二球") {
                var diyi = document.querySelector("#d1");
            } else if (this.titlename == "第三球") {
                var diyi = document.querySelector("#d2");
            } else if (this.titlename == "第四球") {
                var diyi = document.querySelector("#d3");
            } else if (this.titlename == "第五球") {
                var diyi = document.querySelector("#d4");
            }
            if (this.arry.length != 0) {
                diyi.style.opacity = "1";
            } else {
                diyi.style.opacity = "0";
            } //  小红点
            if (this.name.length == 0) {
                this.name.push({
                    name: this.titlename,
                    name1: 999
                });
            } else {
                this.name.forEach((item, i) => {
                    if (item.name1 == 999) {
                        this.name.splice(i, 1);
                    }
                });
            }
            this.$emit("length", this.arry.length - value, this.name);
        }
    },
    props: ["enpty", "titlename", "odds"],
    watch: {
        odds: function(newvue) {
            this.oddsarr = this.odds;
        },
        enpty: function(newvue) {
            if (newvue <= 0) {
                this.arry = [];
                this.name = [];
            }
        }
    }
};
</script>
<style lang="scss" scoped>
// ////
span {
    display: inline-block;
}
.right {
    background: #fff;
    width: 4.6rem;
    float: right;
    height: 100%;
    margin-right: 0.35rem;
    .rightone {
        text-align: center;
        font-size: 0.28rem;
        padding: 0.3rem 0;
    }
    ul {
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
    }
    .Chlist {
        width: 49%;

        padding: 0.2rem 0;
        padding-left: 0.3rem;
        .Chspan {
            text-align: center;
            font-size: 0.4rem;
            width: 0.7rem;
            height: 0.7rem;
            border-radius: 50%;
            border: 1px solid #d51313;
            color: #d51313;
            margin-right: 0.2rem;
            line-height: 0.7rem;
        }
        .background {
            background: #d51313;
            color: #fff;
        }
        span {
            font-size: 0.24rem;
            color: #4f4f4f;
        }
    }
}

// ///////////
</style>   